<template>
  <view class="container">
    <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="loadMore">
      <view class="title">优惠团购</view>
      <view class="goods-list">
        <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
          <image :src="item.main_image[0].url" class="goods-image" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-title">{{ item.product_name }}</text>
            <view class="tags-container">
              <view>
                <text class="tag other-tag">随时退</text>
                <text class="tag other-tag">过期退</text>
              </view>
              <text class="tag sold-tag">已售{{ item.virtual_sales || 0 }}</text>
            </view>
            <view class="price-action-container">
              <view class="price-container">
                <text class="goods-price">￥{{ item.price }}</text>
                <text class="original-price">￥{{ item.original_price }}</text>
              </view>
              <button class="buy-btn" @click="handleBuy(item)">立即抢购</button>
            </view>
          </view>
        </view>
      </view>
      <view v-if="loading" class="loading">加载中...</view>
      <view v-if="noMore" class="no-more">没有更多了</view>
    </scroll-view>
  </view>
</template>

<script>
// 在顶部添加请求引入
import { request } from '@/utils/request';
export default {
  data() {
    return {
      goodsList: [],
      page: 1,
      pageSize: 10,
      loading: false,
      noMore: false
    };
  },
  onLoad() {
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      this.loading = true;

      const res = await request({
        url: 'merchant/Group/getGoodsList',
        method: 'GET',
        data: {
          page: this.page,
          pageSize: this.pageSize
        }
      });
      if (res.code !== 1) {
        uni.showToast({
          title: res.msg || '请求失败',
          icon: 'none'
        });
      } else {
        if (res.data && res.data.length) {
          this.goodsList = [...this.goodsList, ...res.data];
        } else {
          this.noMore = true;
        }
      }
      this.loading = false;
      // console.log(this.goodsList);

    },
    loadMore() {
      if (!this.noMore) {
        this.page++;
        this.getGoodsList();
      }
    },
    handleBuy(item) {
      uni.navigateTo({
                url: '/pages/group/details/details?productId=' + item.group_id
            });
    }
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}

.title {
  padding: 20rpx 20px;
  font-size: 36rpx;
  font-weight: bold;
  background-color: #eee;
}

.goods-list {
  padding: 20rpx;
  background-color: #fff;
}

.goods-item {
  display: flex;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.goods-image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-action-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.price-container {
  display: flex;
  align-items: flex-end;
  /* flex-direction: column; */
}

.goods-price {
  font-size: 32rpx;
  color: #f40;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.buy-btn {
  padding: 12rpx 24rpx;
  font-size: 28rpx;
  background-color: #f40;
  color: #fff;
  border-radius: 30rpx;
  margin: unset;
}

.tags-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 10rpx 0;
}

.tag {
  padding: 4rpx 12rpx;
  font-size: 24rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
}

.sold-tag {
  background-color: #f0f0f0;
  color: #666;
  min-width: 50px;
  text-align: center;
}

.other-tag {
  background-color: #e6f7ff;
  color: #1890ff;
}

.loading,
.no-more {
  text-align: center;
  padding: 20rpx;
}
</style>
